<template>
    <div class="index-lists">
        <el-card class="!border-none" shadow="never">
            <el-page-header content="新建商标" @back="$router.back()" />
        </el-card>
        <el-card class="mt-4 !border-none" shadow="never">
            <el-collapse v-model="activeNames">
                <el-collapse-item title="客户信息" name="1">
                    <el-form
                        ref="formRef"
                        class="mb-[-16px]"
                        :model="queryParams"
                        :rules="formRules"
                        :inline="true"
                    >
                        <el-form-item label="客户名称" prop="clientName" style="padding: 10px 0px">
                            <el-select
                                class="w-[350px]"
                                v-model="queryParams.clientName"
                                filterable
                                @change="handleClientName"
                            >
                                <el-option
                                    v-for="item in optionNames"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                            <div>&nbsp;&nbsp;查看详情</div>
                        </el-form-item>
                        <div>
                            <div style="display: flex; border: 1px solid #f2f2f2">
                                <div class="namebox">
                                    <span style="color: #ff0000">*</span>
                                    <span style="white-space: nowrap">客户联系人</span>
                                </div>
                                <div style="padding: 10px; width: 86%">
                                    <span style="padding: 10px">选择联系人</span>
                                    <el-button
                                        v-perms="['linkman:add']"
                                        size="small"
                                        type="primary"
                                        @click="linkmanAdd()"
                                    >
                                        <template #icon>
                                            <icon name="el-icon-Plus" />
                                        </template>
                                        新增联系人
                                    </el-button>
                                    <div style="padding: 0px 10px">
                                        <el-checkbox-group
                                            v-model="queryParams.customerContactid"
                                            @change="changeLinkman"
                                        >
                                            <el-checkbox
                                                v-for="item in linkmanData"
                                                :label="item.id"
                                                size="large"
                                                >{{ item.name }}</el-checkbox
                                            >
                                        </el-checkbox-group>
                                    </div>
                                    <el-table
                                        class="mt-4"
                                        size="large"
                                        :data="likemanTableData"
                                        stripe
                                    >
                                        <el-table-column label="名称" prop="name" min-width="140" />
                                        <el-table-column
                                            label="联系人类别"
                                            prop="type"
                                            min-width="150"
                                        />
                                        <el-table-column
                                            label="座机"
                                            prop="number"
                                            min-width="140"
                                        />
                                        <el-table-column
                                            label="电话"
                                            prop="phone"
                                            min-width="140"
                                        />
                                        <el-table-column
                                            label="email"
                                            prop="email"
                                            min-width="140"
                                        />
                                        <el-table-column
                                            label="联系地址"
                                            prop="workAddress"
                                            min-width="140"
                                        />
                                        <el-table-column label="操作" width="120" fixed="right">
                                            <template v-slot="scope">
                                                <el-button
                                                    @click="
                                                        moveRow(
                                                            likemanTableData,
                                                            scope.row,
                                                            scope.$index,
                                                            'up'
                                                        )
                                                    "
                                                    size="mini"
                                                    type="text"
                                                    :icon="Top"
                                                    :disabled="scope.$index === 0"
                                                >
                                                </el-button>
                                                <el-button
                                                    @click="
                                                        moveRow(
                                                            likemanTableData,
                                                            scope.row,
                                                            scope.$index,
                                                            'down'
                                                        )
                                                    "
                                                    size="mini"
                                                    type="text"
                                                    :icon="Bottom"
                                                    :disabled="
                                                        scope.$index === likemanTableData.length - 1
                                                    "
                                                >
                                                </el-button>
                                                <el-button type="danger" link @click="handleAdd()">
                                                    <template #icon>
                                                        <el-icon>
                                                            <Close />
                                                        </el-icon>
                                                    </template>
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div style="display: flex; border: 1px solid #f2f2f2">
                                <div class="namebox">
                                    <span style="white-space: nowrap">申请人</span>
                                </div>
                                <div style="padding: 10px; width: 85%">
                                    <span style="padding: 10px">选择申请人</span>

                                    <el-button
                                        v-perms="['linkman:add']"
                                        size="small"
                                        type="primary"
                                        @click="applicantAdd()"
                                    >
                                        <template #icon>
                                            <icon name="el-icon-Plus" />
                                        </template>
                                        新增申请人
                                    </el-button>

                                    <div style="padding: 0px 10px">
                                        <el-checkbox-group
                                            v-model="queryParams.proposerid"
                                            @change="changeApplicant"
                                        >
                                            <el-checkbox
                                                v-for="item in applicantData"
                                                :label="item.id"
                                                size="large"
                                                >{{ item.customerNameChinese }}</el-checkbox
                                            >
                                        </el-checkbox-group>
                                    </div>
                                    <el-table
                                        class="mt-4"
                                        size="large"
                                        :data="applicantTableData"
                                        stripe
                                    >
                                        <el-table-column
                                            label="案件类型"
                                            prop="caseType"
                                            min-width="100"
                                        />
                                        <el-table-column
                                            label="申请人(中文)"
                                            prop="customerNameChinese"
                                            min-width="120"
                                        />
                                        <el-table-column
                                            label="申请人(英文)"
                                            prop="customerNameEnglish"
                                            min-width="120"
                                        />
                                        <el-table-column
                                            label="申请人编号"
                                            prop="applicantId"
                                            min-width="120"
                                        />
                                        <el-table-column
                                            label="所属地区"
                                            prop="nation"
                                            min-width="100"
                                        />
                                        <el-table-column
                                            label="申请人地址"
                                            prop="streetChinese"
                                            min-width="120"
                                        />

                                        <el-table-column
                                            label="申请人地址(英文)"
                                            prop="streetEnglish"
                                            min-width="160"
                                        />
                                        <el-table-column
                                            label="证件号"
                                            prop="idNumber"
                                            min-width="100"
                                        />
                                        <el-table-column
                                            label="创建日期"
                                            prop="creationDate"
                                            min-width="120"
                                        />
                                        <el-table-column
                                            label="创建人"
                                            prop="creator"
                                            min-width="100"
                                        />
                                        <el-table-column
                                            label="费减备案"
                                            prop="feeReductionFiling"
                                            min-width="100"
                                        />
                                        <el-table-column
                                            label="总委托书编号"
                                            prop="id"
                                            min-width="140"
                                        />
                                        <el-table-column
                                            label="邮编"
                                            prop="cepctPostcode"
                                            min-width="100"
                                        />

                                        <el-table-column label="操作" width="120" fixed="right">
                                            <template v-slot="scope">
                                                <el-button
                                                    @click="
                                                        moveRow(
                                                            applicantTableData,
                                                            scope.row,
                                                            scope.$index,
                                                            'up'
                                                        )
                                                    "
                                                    size="mini"
                                                    type="text"
                                                    :icon="Top"
                                                    :disabled="scope.$index === 0"
                                                >
                                                </el-button>
                                                <el-button
                                                    @click="
                                                        moveRow(
                                                            applicantTableData,
                                                            scope.row,
                                                            scope.$index,
                                                            'down'
                                                        )
                                                    "
                                                    size="mini"
                                                    type="text"
                                                    :icon="Bottom"
                                                    :disabled="
                                                        scope.$index ===
                                                        applicantTableData.length - 1
                                                    "
                                                >
                                                </el-button>
                                                <el-button type="danger" link @click="handleAdd()">
                                                    <template #icon>
                                                        <el-icon>
                                                            <Close />
                                                        </el-icon>
                                                    </template>
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </div>
                    </el-form>
                </el-collapse-item>
                <el-collapse-item title="开卷信息" name="2">
                    <uncoil-data />
                </el-collapse-item>
                <el-collapse-item title="附件信息" name="3">
                    <annex-data />
                </el-collapse-item>
            </el-collapse>
        </el-card>
        <linkmanEditPopup
            v-if="linkmanshowEdit"
            ref="linkmaneditRef"
            @success="getLists"
            @close="linkmanshowEdit = false"
        />
        <applicantEditPopup
            v-if="applicantshowEdit"
            ref="applicanteditRef"
            @success="getLists"
            @close="applicantshowEdit = false"
        />
        <submitEditPopup
            v-if="submitshowEdit"
            ref="submiteditRef"
            @success="getLists"
            @close="submitshowEdit = false"
        />
        <footer-btns>
            <div style="padding: 20px">
                <el-button type="primary">
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                    保存
                </el-button>
                <el-button @click="submitAdd()">提交</el-button>
            </div>
        </footer-btns>
    </div>
</template>
<script lang="ts" setup name="copyright">
import { copyrightDelete, copyrightLists } from '@/api/copyright'
import { usePaging } from '@/hooks/usePaging'
import { customerNameFoAll } from '@/api/customer/customerColList'
import feedback from '@/utils/feedback'
import applicatVue from './component/applicatVue.vue'
import uncoilData from './uncoilData.vue'
import annexData from './clientFile/annexData.vue'
import { linkmanAlls } from '@/api/linkman'
import { applicantAll } from '@/api/applicant'
import baseVue from './component/baseVue.vue'
import { Top, Close, Bottom } from '@element-plus/icons-vue'
import linkmanEditPopup from '@/views/client/clientData/component/linkman/edit.vue'
import applicantEditPopup from '@/views/client/clientData/component/applicantList/edit.vue'
import submitEditPopup from '../edit.vue'

const optionNames = ref([])

const activeNames = ['1', '2', '3', '4', '5', '6', '7', '8', '9']

const linkmanshowEdit = ref(false)
const linkmaneditRef = shallowRef<InstanceType<typeof linkmanEditPopup>>()

const applicantshowEdit = ref(false)
const applicanteditRef = shallowRef<InstanceType<typeof applicantEditPopup>>()

const submitshowEdit = ref(false)
const submiteditRef = shallowRef<InstanceType<typeof submitEditPopup>>()

const submitAdd = async () => {
    submitshowEdit.value = true
    await nextTick()
    submiteditRef.value?.open('add')
}
const queryParams = reactive({
    proposition: '',
    proposalName: '',
    clientName: '',
    reputationGrade: '',
    businessPersonnel: '',
    businessAssistant: '',
    internalSecurityPeople: '',
    caseType: '商标',
    searchman: '',
    searchTimeStart: '',
    searchTimeEnd: '',
    externalCaseSource: '',
    secondCaseSource: '',
    caseTypeid: '',
    businessPersonnelid: '',
    customerContactid: [],
    proposerid: [],
    inventorInformationid: '',
    isTechnicalDisclosure: '',
    isBopis: '',
    userId: '',
    userName: '',
    searchTime: ''
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: copyrightLists,
    params: queryParams
})

const radio1 = ref('1')
const radio2 = ref('1')
const formRules = {
    proposalName: [
        {
            required: true,
            message: '请输入提案名称',
            trigger: ['blur']
        }
    ],
    clientName: [
        {
            required: true,
            message: '请输入客户名称',
            trigger: ['blur']
        }
    ],
    businessPersonnel: [
        {
            required: true,
            message: '请输入业务人员',
            trigger: ['blur']
        }
    ],
    customerContactid: [
        {
            required: true,
            message: '请选择客户联系人',
            trigger: ['blur']
        }
    ]
}

// const handleAdd = async () => {
//     showEdit.value = true
//     await nextTick()
//     editRef.value?.open('add')
// }

// const handleEdit = async (data: any) => {
//     showEdit.value = true
//     await nextTick()
//     editRef.value?.open('edit')
//     editRef.value?.getDetail(data)
// }
const linkmanAdd = async () => {
    linkmanshowEdit.value = true
    await nextTick()
    linkmaneditRef.value?.open('add')
}

const applicantAdd = async () => {
    applicantshowEdit.value = true
    await nextTick()
    applicanteditRef.value?.open('add')
}
//获取所有客户名称
const getCustomerName = async () => {
    const data = await customerNameFoAll()
    optionNames.value = data
}

const queryParamsLinkman = reactive({
    caseType: '商标',
    customerMianId: 0
})

const queryParamsApplicant = reactive({
    caseType: '商标',
    customerId: 0
})
const linkmanData = ref([])
const likemanTableData = ref([])
const getLinkmanList = async () => {
    const data = await linkmanAlls(queryParamsLinkman)
    linkmanData.value = data
}
const changeLinkman = async () => {
    likemanTableData.value = linkmanData.value.filter((item) =>
        queryParams.customerContactid.includes(item.id)
    )
}
const applicantTableData = ref([])
const applicantData = ref([])
const getApplicantList = async () => {
    const data = await applicantAll(queryParamsApplicant)
    applicantData.value = data
}
const changeApplicant = async () => {
    applicantTableData.value = applicantData.value.filter((item) =>
        queryParams.proposerid.includes(item.id)
    )
}
const handleClientName = (val: number) => {
    queryParamsLinkman.customerMianId = val
    queryParamsApplicant.customerId = val

    if (val) {
        getLinkmanList()
        getApplicantList()
    }
}
const moveRow = (tabeldate: any, row: any, index: any, direction: string) => {
    // 计算目标索引
    const targetIndex = direction === 'up' ? index - 1 : index + 1

    // 边界判断
    if (targetIndex < 0 || targetIndex >= tabeldate.length) return

    // 移动数据
    const temp = tabeldate[index]
    tabeldate[index] = tabeldate[targetIndex]
    tabeldate[targetIndex] = temp
}

const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    await copyrightDelete({ id })
    feedback.msgSuccess('删除成功')
    getLists()
}

getCustomerName()
getLists()
</script>
<style scoped>
.formEdit .el-form-item {
    width: 590px;
}

.namebox {
    /* padding: 0px 50px; */
    min-width: 175px;
    background-color: var(--el-bg-color-collapse);
    display: flex;
    justify-content: center;
    align-items: center;
}

::v-deep .el-collapse-item__header {
    padding-left: 54px;
    background-color: var(--el-bg-color-collapse);
    font-size: 16px;
    font-weight: 600;
    color: var(--el-text-color-collapse);
}

::v-deep .el-collapse-item__wrap {
    padding-top: 40px;
}
</style>
